- breadcrumb_title s_('AccessTokens|Access tokens')
- page_title _('Project access tokens')
- type = _('project access token')
- type_plural = _('project access tokens')
- @force_desktop_expanded_sidebar = true

= render ::Layouts::SettingsSectionComponent.new(page_title) do |c|
  - c.with_description do
    - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/project_access_tokens.md') }
    - if current_user.can?(:create_resource_access_tokens, @project)
      = _('Generate project access tokens scoped to this project for your applications that need access to the GitLab API.')
      = _('You can also use project access tokens with Git to authenticate over HTTP(S). %{link_start}Learn more.%{link_end}').html_safe % { link_start: help_link_start, link_end: '</a>'.html_safe }
    - else
      = _('Project access token creation is disabled in this group.')
      - root_group = @project.group.root_ancestor
      - if current_user.can?(:admin_group, root_group)
        - link = link_to('', edit_group_path(root_group), target: '_blank', rel: 'noopener noreferrer')
        = safe_format(_('You can enable project access token creation in %{link_start}group settings%{link_end}.'), tag_pair(link, :link_start, :link_end))
      = html_escape(_('You can still use and manage existing tokens. %{link_start}Learn more.%{link_end}')) % { link_start: help_link_start, link_end: '</a>'.html_safe }
  - c.with_body do
    #js-new-access-token-app{ data: { access_token_type: type } }

    = render ::Layouts::CrudComponent.new(_('Active project access tokens'),
      icon: 'token',
      count: @active_access_tokens_size,
      count_options: { class: 'js-token-count' },
      form_options: { class: 'gl-hidden js-toggle-content js-add-new-token-form' },
      options: { class: 'gl-mt-5 js-toggle-container js-token-card' }) do |c|
      - c.with_actions do
        - if current_user.can?(:create_resource_access_tokens, @project)
          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-new-token-button' } }) do
            = _('Add new token')

      - c.with_form do
        - if current_user.can?(:create_resource_access_tokens, @project)
          = render_if_exists 'projects/settings/access_tokens/form', type: type

      - c.with_body do
        #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, backend_pagination: 'true', initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true } }

    .gl-mt-5
      = render ::Layouts::CrudComponent.new(_('Inactive project access tokens'),
        icon: 'token',
        count: @inactive_access_tokens_size) do |c|
        - c.with_body do
          #js-inactive-access-token-table-app{ data: { no_inactive_tokens_message: _('This project has no inactive access tokens.'), pagination_url: inactive_project_settings_access_tokens_url(@project, format: :json) } }
